<template>
    <div class="searchComponent-box">
        <!-- 分割线 -->
        <hr>
        <!-- 历史搜索展示 -->
        <div class="search-histroy">
            <div class="search-histroy-left">
                <i class="iconfont icon-search"></i>
            </div>
            <div class="search-histroy-center">
                <p>历史搜索</p>
                <div v-if="history.length==0">暂无历史记录</div>
                <div v-if="history.length!=0">
                    <p v-for="(v,i) in history" :key="i"
                        @click="goToSearchGood(v)"
                    >{{v}}</p>
                </div>
            </div>
            <div class="search-histroy-right">
                <i class="iconfont icon-trash" @click="deleteHistory()"></i>
            </div>
        </div>
        <!-- 热门搜索 -->
        <div class="search-hot">
            <div class="search-hot-left">
                <i class="iconfont icon-star"></i>
            </div>
            <div class="search-hot-center">
                <p>热门搜索</p>
                <div>
                    <p v-for="(v,i) in hotWord" :key="i"
                        :style="'color:'+v.color"
                        @click="goToSearchGood(v.query)"
                    >{{v.query}}</p>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import {mapState,mapActions}  from "vuex";
export default {
    computed:{
        ...mapState(["hotWord","history"])
    },
    methods:{
        ...mapActions(["loadHistory"]),
        deleteHistory(){
            localStorage.setItem("history",JSON.stringify([]));
            this.$store.dispatch("loadHistory");
        },
        goToSearchGood(search){
            this.$store.state.search=search;
            this.$store.commit("setHistory",search);
            this.$router.push({
                path:'searchGood',
                query:{
                    q:search
                }
            });
        }
    },
    mounted(){
        this.loadHistory();
    }
}
</script>
<style lang="less" scoped>
//搜索历史记录页面样式
.searchComponent-box {
    position: absolute;
    top: 1rem;
    bottom: 0rem;
    left: 0rem;
    right: 0rem;
    overflow-y: auto;
}
//历史搜索的样式
.search-histroy,
.search-hot {
    width: 100%;
    box-sizing: border-box;
    padding: 0.4rem 0.2rem;
    display: flex;
    border-bottom: 1px solid @gray;
    > .search-histroy-left {
        flex: 1;
        text-align: center;
        > i {
            font-size: 0.4rem;
        }
    }
    > .search-histroy-center {
        flex: 6;
        padding: 0 0.1rem;
        > div {
            display: flex;
            padding-top: 0.2rem;
            flex-flow: row wrap;
            > p {
                padding: 0 0.1rem;
                background-color: @gray-ee;
                margin-right: 0.1rem;
                border: 1px inset @gray;
                color: @gray;
                font-size: 0.25rem;
                margin-top:0.1rem;
                cursor:pointer;
            }
        }
    }
    > .search-histroy-right {
        flex: 1;
        text-align: center;
        > i {
            font-size: 0.4rem;
        }
    }
    > .search-hot-left {
        flex: 1;
        text-align: center;
        > i {
            font-size: 0.4rem;
        }
    }
    > .search-hot-center {
        flex: 6;
        padding: 0rem 0.7rem 0rem 0.05rem ;
        > div {
            display: flex;
            flex-flow:row wrap;
            padding-top: 0.2rem;
            > p {
                padding: 0 0.1rem;
                background-color: @gray-ee;
                margin: 0.1rem 0.1rem 0rem 0rem;
                border: 1px inset @gray;
                color: @gray;
                font-size: 0.25rem;
                cursor:pointer;
            }
        }
    }
}
.search-hot{
    border:none;
}
</style>